﻿<!DOCTYPE html>
<!--[if lt IE 9 ]> <html lang="en" dir="ltr" class="no-js ie-old"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" dir="ltr" class="no-js ie9"> <![endif]-->
<!--[if IE 10 ]> <html lang="en" dir="ltr" class="no-js ie10"> <![endif]-->
<!--[if (gt IE 10)|!(IE)]><!-->
<html lang="en" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<!--<![endif]-->

<head>

    <!-- ––––––––––––––––––––––––––––––––––––––––– -->
    <!-- META TAGS                                 -->
    <!-- ––––––––––––––––––––––––––––––––––––––––– -->
    <meta charset="utf-8">
    <!-- Always force latest IE rendering engine -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Mobile specific meta -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <!-- ––––––––––––––––––––––––––––––––––––––––– -->
    <!-- PAGE TITLE                                -->
    <!-- ––––––––––––––––––––––––––––––––––––––––– -->
    <title>FRIDAY | Coupons, Deals, Discounts and Promo codes Template</title>

    <!-- ––––––––––––––––––––––––––––––––––––––––– -->
    <!-- SEO METAS                                 -->
    <!-- ––––––––––––––––––––––––––––––––––––––––– -->
    <meta name="description" content="FRIDAY is a responsive multipurpose-ecommerce site template allows you to store coupons and promo codes from different brands and create store for deals, discounts, It can be used as coupon website such as groupon.com and also as online store">
    <meta name="	black friday, coupon, coupon codes, coupon theme, coupons, deal news, deals, discounts, ecommerce, friday deals, groupon, promo codes, responsive, shop, store coupons">
    <meta name="robots" content="index, follow">
    <meta name="author" content="CODASTROID">

    <!-- ––––––––––––––––––––––––––––––––––––––––– -->
    <!-- PAGE FAVICON                              -->
    <!-- ––––––––––––––––––––––––––––––––––––––––– -->
    <link rel="apple-touch-icon" th:href="@{/assets/images/favicon/apple-touch-icon.png}">
    <link rel="icon" th:href="@{/assets/images/favicon/favicon.ico}">

    <!-- ––––––––––––––––––––––––––––––––––––––––– -->
    <!-- GOOGLE FONTS                              -->
    <!-- ––––––––––––––––––––––––––––––––––––––––– -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600" rel="stylesheet">

    <!-- ––––––––––––––––––––––––––––––––––––––––– -->
    <!-- Include CSS Filess                        -->
    <!-- ––––––––––––––––––––––––––––––––––––––––– -->

    <!-- Bootstrap -->
    <div th:replace="commons/css/css_header_footer::public_css1"/>


</head>

<body id="body" class="wide-layout preloader-active">




    <!--[if lt IE 9]>
        <p class="browserupgrade alert-error">
        	You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.
        </p>
    <![endif]-->

    <noscript>
        <div class="noscript alert-error">
            For full functionality of this site it is necessary to enable JavaScript. Here are the <a href="http://www.enable-javascript.com/" target="_blank">
		 instructions how to enable JavaScript in your web browser</a>.
        </div>
    </noscript>

    <!-- ––––––––––––––––––––––––––––––––––––––––– -->
    <!-- PRELOADER                                 -->
    <!-- ––––––––––––––––––––––––––––––––––––––––– -->
    <!-- Preloader -->
    <div id="preloader" class="preloader">
        <div class="loader-cube">
            <div class="loader-cube__item1 loader-cube__item"></div>
            <div class="loader-cube__item2 loader-cube__item"></div>
            <div class="loader-cube__item4 loader-cube__item"></div>
            <div class="loader-cube__item3 loader-cube__item"></div>
        </div>
    </div>
    <!-- End Preloader -->
    <!-- ––––––––––––––––––––––––––––––––––––––––– -->
    <!-- WRAPPER                                   -->
    <!-- ––––––––––––––––––––––––––––––––––––––––– -->
    <div id="pageWrapper" class="page-wrapper">
        <!-- –––––––––––––––[ HEADER ]––––––––––––––– -->
        <div id="header" th:replace="commons/header::public_header"/>        <!-- –––––––––––––––[ HEADER ]––––––––––––––– -->

        <!-- –––––––––––––––[ PAGE CONTENT ]––––––––––––––– -->
        <main id="mainContent" class="main-content">
            <div class="page-container">
                <div class="container">
                    <div class="cart-area ptb-60">
                        <div class="container">
                            <div class="cart-wrapper">
                                <h3 class="h-title mb-30 t-uppercase">购物车</h3>
                                <table  class="cart-list mb-30" id="cart_list">
                                    <input type="hidden" th:value="${session.goodsSum}">
                                    <thead class="panel t-uppercase">
                                        <tr>
                                            <th>产品名称</th>
                                            <th>单价</th>
                                            <th>数量</th>
                                            <th>总价</th>
                                            <th></th>
                                        </tr>
                                    </thead >
                                    <tbody >

                                    </tbody>
                                </table>
                                <div class="cart-price">
                                    <h5 class="t-uppercase mb-20">总价</h5>
                                    <ul class="panel mb-20">

                                        <li>
                                            <div class="item-name">
                                                商品总数
                                            </div>
                                            <div class="price" id="totle_num">
                                            </div>
                                        </li>
                                        <li>
                                            <div class="item-name">
                                                <strong class="t-uppercase">合计订单</strong>
                                            </div>
                                            <div class="price" >
                                                <span id="total_price"></span>
                                            </div>
                                        </li>
                                    </ul>
                                    <div class="t-right">
                                        <a href="/order" class="btn btn-rounded btn-lg">结账</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </main>
        <!-- –––––––––––––––[ END PAGE CONTENT ]––––––––––––––– -->
        <section class="footer-top-area pt-70 pb-30 pos-r bg-blue">
            <div class="container">
                <div class="row row-tb-20">
                    <div class="col-sm-12 col-md-7">
                        <div class="row row-tb-20">
                            <div class="footer-col col-sm-6">
                                <div class="footer-about">
                                    <img class="mb-40" th:src="@{/assets/images/logo_light.png}" width="250" alt="">
                                    <p class="color-light">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam dolores quidem mollitia id ipsa nisi necessitatibus iure repudiandae aperiam, odit ipsam dolor fugiat corporis nesciunt illo nemo minus.</p>
                                </div>
                            </div>
                            <div class="footer-col col-sm-6">
                                <div class="footer-top-twitter">
                                    <h2 class="color-lighter">Twitter Feed</h2>
                                    <ul class="twitter-list">
                                        <li class="single-twitter">
                                            <p class="color-light"><i class="ico fa fa-twitter"></i><a href="#">@masum_rana :</a> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore in reprehenderit.</p>
                                        </li>
                                        <li class="single-twitter">
                                            <p class="color-light"><i class="ico fa fa-twitter"></i><a href="#">@masum_rana :</a> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione id corrupti iusto cupiditate omnis.</p>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-5">
                        <div class="row row-tb-20">
                            <div class="footer-col col-sm-6">
                                <div class="footer-links">
                                    <h2 class="color-lighter">Quick Links</h2>
                                    <ul>
                                        <li><a href="deals_grid.html">Latest Deals</a>
                                        </li>
                                        <li><a href="coupons_grid.html">Newest Coupons</a>
                                        </li>
                                        <li><a href="contact_us_02.html">Contact Us</a>
                                        </li>
                                        <li><a href="404.html">Error 404</a>
                                        </li>
                                        <li><a href="terms_conditions.html">Terms of Use</a>
                                        </li>
                                        <li><a href="faq.html">FAQs</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="footer-col col-sm-6">
                                <div class="footer-top-instagram instagram-widget">
                                    <h2>Instagram Widget</h2>
                                    <div class="row row-tb-5 row-rl-5">


                                        <div class="instagram-widget__item col-xs-4">
                                            <img th:src="@{/assets/images/instagram/instagram_01.jpg}" alt="">
                                        </div>


                                        <div class="instagram-widget__item col-xs-4">
                                            <img th:src="@{/assets/images/instagram/instagram_02.jpg}" alt="">
                                        </div>


                                        <div class="instagram-widget__item col-xs-4">
                                            <img th:src="@{/assets/images/instagram/instagram_03.jpg}" alt="">
                                        </div>


                                        <div class="instagram-widget__item col-xs-4">
                                            <img th:src="@{/assets/images/instagram/instagram_04.jpg}" alt="">
                                        </div>


                                        <div class="instagram-widget__item col-xs-4">
                                            <img th:src="@{/assets/images/instagram/instagram_05.jpg}" alt="">
                                        </div>


                                        <div class="instagram-widget__item col-xs-4">
                                            <img th:src="@{/assets/images/instagram/instagram_06.jpg}" alt="">
                                        </div>


                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12">
                        <div class="payment-methods t-center">
                            <span><img th:src="@{/assets/images/icons/payment/paypal.jpg}" alt=""></span>
                            <span><img th:src="@{/assets/images/icons/payment/visa.jpg}" alt=""></span>
                            <span><img th:src="@{/assets/images/icons/payment/mastercard.jpg}" alt=""></span>
                            <span><img th:src="@{/assets/images/icons/payment/discover.jpg}" alt=""></span>
                            <span><img th:src="@{/assets/images/icons/payment/american.jpg}" alt=""></span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- –––––––––––––––[ FOOTER ]––––––––––––––– -->
        <div id="footer" th:replace="commons/footer::public_footer"/>
        <!-- –––––––––––––––[ END FOOTER ]––––––––––––––– -->

    </div>
    <!-- ––––––––––––––––––––––––––––––––––––––––– -->
    <!-- END WRAPPER                               -->
    <!-- ––––––––––––––––––––––––––––––––––––––––– -->


    <!-- ––––––––––––––––––––––––––––––––––––––––– -->
    <!-- BACK TO TOP                               -->
    <!-- ––––––––––––––––––––––––––––––––––––––––– -->
    <div id="backTop" class="back-top is-hidden-sm-down">
        <i class="fa fa-angle-up" aria-hidden="true"></i>
    </div>

    <!-- ––––––––––––––––––––––––––––––––––––––––– -->
    <!-- SCRIPTS                                   -->
    <!-- ––––––––––––––––––––––––––––––––––––––––– -->

   <div th:replace="commons/js/js_header_footer::public_js1"/>

</body>
<script>
    $(document).ready(function () {
        getcart();
    });

    var totalMoney = 0;
    var totalNum = 0;
    var oldNum = 0;

    function getcart() {
        $.ajax({
            url: "/cartjson",
            type: "post",
            dataType: "json",
            success: function (data) {
                build_cart_table(data);
            }
        });
    }

    function build_cart_table(result) {
        $("#cart_list tbody").empty();
        var goods = result.info.shopcart;

        if(goods.length === 0) {
            var spareTd = $('<tr> <td colspan="6"> <div class="coupon" style="margin-left:37%;">购物车还是空的，快去<a href="/main" style="color:red;">首页</a>看看吧！ </div> </td> </tr>');
            spareTd.appendTo("#cart_list tbody");
        } else {
            $.each(goods, function (index,item) {

                var delA = $("<button></button>").addClass("close").attr("data-dismiss","alert")
                    .append($("<i></i>").addClass("fa fa-trash-o"));

                var deleteCart = $("<td></td>").addClass("product-remove product-remove_2")
                    .append(delA);

                delA.click(function () {
                    del(item.goodsid);
                });

                var shopimage = $("<figure></figure>").addClass("product-thumb")
                        .append($("<img/>").attr("src",/pictures/+item.imagePaths[0].path));

                var goodsname = $("<h6></h6>").addClass("title mb-15 t-uppercase")
                    .append($("<a></a>").append(item.goodsname));

                var goodscategory = $("<div></div>").addClass("type font-12")
                    .append($("<span></span>").append(item.category));



                var goodsinfor = $("<td></td>")
                    .append($("<div></div>").addClass("media-left is-hidden-sm-down")
                        .append(shopimage))
                    .append($("<div></div>").addClass("media-body valign-middle")
                        .append(goodsname).append(goodscategory));

                var goodsprice = $("<td></td>").addClass("product-stock-status")
                    .append( $("<span></span>").append(item.price));

                var numIput = $("<input/>").addClass("quantity-label").attr("type","number").attr("value",item.num);
                oldNum = item.num;

                numIput.change(function () {
                    updateCart(this,item.goodsid,$(this).val(),item.price);
                });

                var num = $("<td></td>").addClass("product-stock-status")
                    .append(numIput);

                var totalPrice = $("<td></td>")
                    .append($("<span></span>").append("￥"+item.price*item.num));

                var goodsitem = $("<tr></tr>").addClass("panel alert")
                    .append(goodsinfor)
                    .append(goodsprice)
                    .append(num)
                    .append(totalPrice)
                    .append(deleteCart)
                    .appendTo("#cart_list tbody");
                totalNum++;
                totalMoney = totalMoney + item.price*item.num;
            });
        }

        //小计
        $("#total_price").text("￥"+totalMoney);
        $("#totle_num").text(totalNum);
    }

    function del(goodsId){
        $.ajax({
            url: "/deleteCart/" + goodsId,
            type: "DELETE",
            success: function (result) {
                // swal(result.msg, "","success");
                var price = result.info.good_price;

                totalMoney = totalMoney - price;
                totalNum--;
                $("#total_price").text("￥"+totalMoney);
                $("#totle_num").text(totalNum);
                $("#cart_num").text(totalNum);
                layer.msg("删除成功")
            },
            error:function () {
                swal("删除失败");
            }
         });
    }

    //改变商品数量更新购物车
    function updateCart(thisObject,goodsid, newNum, goodsprice) {
        //获取当前数量
        // var newNum = $(".num").val();
        $.ajax({
            url: "/cart/update",
            data: {
                goodsid: goodsid,
                num:newNum
            },
            method: "post",
            success: function (result) {
                // swal(result.msg, "", "success");

                //获取全部列
                var td = $(thisObject).parents('tr').children('td');
                //定位到第4列的span框（某一商品的总价），并修改它的值
                td.eq(3).find("span").text("￥"+goodsprice * newNum);
                console.log(totalMoney + " " + newNum + " " + oldNum);
                //修改当前全部商品的价格
                totalMoney = totalMoney + goodsprice*(newNum - oldNum);
                $("#total_price").text("￥"+totalMoney);
                //更新oldNum（因为数据库已经修改，但是Ajax采用异步，所以没有重新请求数据，要手动更新oldNum）
                oldNum = newNum;
                layer.msg('修改成功');
            },
            error: function (result) {
                swal("更新购物车失败");
            }
        });
    }
</script>
</html>
